<?xml version="1.0" encoding="UTF-8"?>
<html>
 <head>
  <title>WireIt: How to use Wire and Terminals definitions</title>
  
<!-- YUI -->
<link rel="stylesheet" type="text/css" href="../lib/yui/fonts/fonts-min.css" /> 
<link rel="stylesheet" type="text/css" href="../lib/yui/reset/reset-min.css" />

<script type="text/javascript" src="../lib/yui/utilities/utilities.js"></script>

<!-- Excanvas -->
<!--[if IE]><script type="text/javascript" src="../lib/excanvas.js"></script><![endif]-->

<!-- WireIt -->
<script type="text/javascript" src="../js/WireIt.js"></script>
<script type="text/javascript" src="../js/CanvasElement.js"></script>
<script type="text/javascript" src="../js/Wire.js"></script>
<script type="text/javascript" src="../js/Terminal.js"></script>
<link rel="stylesheet" type="text/css" href="../css/WireIt.css" />

<style>

div.WireIt-Terminal {
	margin: 20px 8px;
}

div.blockBox {
	width: 200px;
	height: 200px;
	margin: 30px;
	float: left;
	position: relative;
	z-index: 5;
	/*background-color: rgb(255,200,200);*/
	border: 1px solid #aaa;
	opacity: 0.8;
	padding: 10px;
	font-weight: bold;
}

</style>
<script>

window.onload = function() {
	
	var block1 = YAHOO.util.Dom.get('block1');
	new WireIt.Terminal(block1, {offsetPosition:[30,30] });
	
	
	var block2 = YAHOO.util.Dom.get('block2');
	new WireIt.Terminal(block2, { wireConfig: { drawingMethod: "bezier"}, offsetPosition:[30,30] });
	new WireIt.Terminal(block2, { wireConfig: { drawingMethod: "straight"}, offsetPosition:[100,30] });
	new WireIt.Terminal(block2, { wireConfig: { drawingMethod: "bezierArrows"}, offsetPosition:[30,100] });
	new WireIt.Terminal(block2, { wireConfig: { drawingMethod: "arrows"}, offsetPosition:[100,100] });
	
	
	var block3 = YAHOO.util.Dom.get('block3');
	new WireIt.Terminal(block3, { direction: [-1,-1], offsetPosition:[30,30] });
	new WireIt.Terminal(block3, { direction: [1,-1], offsetPosition:[100,30] });
	new WireIt.Terminal(block3, { direction: [-1,1], offsetPosition:[30,100] });
	new WireIt.Terminal(block3, { direction: [1,1], offsetPosition:[100,100] });
	
	
	var block4 = YAHOO.util.Dom.get('block4');
	new WireIt.Terminal(block4, {direction: [1,0], offsetPosition:[30,30], 
												wireConfig:{color: "#EEEE11", bordercolor:"#FFFF00"} });
	new WireIt.Terminal(block4, {direction: [1,0], offsetPosition:[100,30], 
												wireConfig:{color: "#EE1111", bordercolor:"#FF0000"} });
	new WireIt.Terminal(block4, {direction: [1,0], offsetPosition:[100,100], 
												wireConfig:{color: "#EE11EE", bordercolor:"#FF00FF"} });
	
	
	var block5 = YAHOO.util.Dom.get('block5');
	new WireIt.Terminal(block5, {direction: [1,0], offsetPosition:[30,30], 
												wireConfig:{width: 5, borderwidth:3} });	
	new WireIt.Terminal(block5, {direction: [1,0], offsetPosition:[100,100], 
												wireConfig:{width: 4, borderwidth:0} });
	new WireIt.Terminal(block5, {direction: [1,0], offsetPosition:[100,30], 
												wireConfig:{width: 1, borderwidth:0} });
	new WireIt.Terminal(block5, {direction: [1,0], offsetPosition:[30,100], 
												wireConfig:{width: 1, borderwidth:4} });


	var block6 = YAHOO.util.Dom.get('block6');
	new WireIt.Terminal(block6, { direction: [1,0], fakeDirection: [1,0], offsetPosition:[30,30] });
	new WireIt.Terminal(block6, { direction: [1,0], fakeDirection: [0,1], offsetPosition:[100,30] });
	new WireIt.Terminal(block6, { direction: [0,1], fakeDirection: [0,1], offsetPosition:[30,100] });
	new WireIt.Terminal(block6, { direction: [1,0], fakeDirection: [0,-1], offsetPosition:[100,100] });

	
	var block7 = YAHOO.util.Dom.get('block7');
	var w1 = new WireIt.Wire(
		new WireIt.Terminal(block7, {offsetPosition:[30,30], editable: false }),
		new WireIt.Terminal(block7, {offsetPosition:[100,30], editable: false }), 
		document.body);
	w1.redraw();
	
	
	var block8 = YAHOO.util.Dom.get('block8');
	new WireIt.Terminal(block8, { nMaxWires: 1, offsetPosition:[30,30] });
	new WireIt.Terminal(block8, { nMaxWires: 2, offsetPosition:[100,30] });
	new WireIt.Terminal(block8, { nMaxWires: 3, offsetPosition:[30,100] });
	
};
</script>

 </head>
 <body>
	<p style="margin: 30px;"><a href="../index.html">&lt; Back</a></p>
	<p style="margin: 5px 30px;">This page presents the various options on the terminals and wires. Try to create some wires from each terminal. Look at the source to see how to use them.</p>
	
	<div id='block1' class="blockBox">
		1. Default options
	</div>
	
	<div id='block2'  class="blockBox">
		2. Drawing methods (bezier,straight,bezierArrows,arrows)
	</div>
	
	<div id='block3' class="blockBox">
		3. Changing directions
	</div>
	
	<div id='block4'  class="blockBox">
		4. Changing colors
	</div>

	<div id='block5'  class="blockBox">
		5. Changing the size of the wire
	</div>
	
	<div id='block6'  class="blockBox">
		6. Using different editing direction
	</div>
	
	<div id='block7'  class="blockBox">
		7. Not editable
	</div>
	
	<div id='block8'  class="blockBox">
		8. Maximum number of wires (1,2,3)
	</div>

 </body>
</html>